<template>
	<view class="pageContent">
		<view class="pageContentView">
			<view class="navstatus"> </view>
			<view class="header">
				<view class="back" @click="goBack">
					<image class="icon" src="../../static/images/back.png" mode=""></image>
				</view>
			</view>

			<view class="pageView">
				<view class="fromTitle">手机注册 </view>
				<view class="from">
					<view class="item">
						<view class="title">手机号</view>
						<view class="inputView">
							<input class="input" type="number" maxlength="11" v-model="loginPhone" placeholder="输入手机号"
								placeholder-class="pla" />
						</view>
					</view>
					<view class="item">
						<view class="title">密码 </view>
						<view class="inputView">
							<input class="input" type="" password v-model="loginPassword" placeholder="输入登录密码"
								placeholder-class="pla" />
						</view>
					</view>
					<view class="item">
						<view class="title">重复密码</view>
						<view class="inputView">
							<input class="input" type="" password v-model="loginRfpassword" placeholder="重复输入登录密码"
								placeholder-class="pla" />
						</view>
					</view>
				</view>
				<view class="loginBtn" @click="sbmitForm_register">注册</view>
				<view class="text">
					<text>已有账号,</text>
					<text style="color: #226CFF;" @click="goPage('/pages/user/login' ,null)">直接登录</text>
				</view>
			</view>
		</view>
		<view class="foo">
			<view class="hine">
				<image class="check_no" src="../../static/images/login_check_no.png" v-if="!checkoutYes"
					@click="selectCheckout()" mode=""></image>
				<image class="check_no" src="../../static/images/login_check_yes.png" v-else @click="selectCheckout()"
					mode="">
				</image>
				<view class="message">
					<text>我已详细阅读并同意</text>
					<navigator url="/pages/user/agreement?type=1" class="href">用户协议</navigator>
					<navigator url="/pages/user/agreement?type=2" class="href">隐私协议</navigator>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		mapGetters,
		mapMutations,
		mapActions
	} from 'vuex';
	import {
		checkPhone
	} from "../../util/util.js"

	export default {
		data() {
			return {
				loginType: "login",
				checkoutYes: false,
				passwordType: "password",
				loginPhone: "",
				loginPassword: "",
				loginRfpassword: ""

			}
		},
		onShow() {
			if (this.hasLogin) {
				this.goReLaunch("/pages/index/index")
			}
		},
		computed: {
			...mapGetters(["userInfo", "hasLogin", "deviceId"])
		},
		methods: {
			...mapMutations(['updatelogin', "updateUserInfo", "updateToken"]),
			selectLogin(type) {
				this.loginType = type
			},
			selectCheckout() {
				this.checkoutYes = !this.checkoutYes
			},
			checkPasswordType() {
				this.passwordType = this.passwordType == "password" ? "text" : "password"
			},
			//  提交表单
			sbmitForm_login() {
				let this_ = this;
				if (!this_.checkoutYes) {
					this.text("请勾选'我同意 用户协助 ，隐私政策")
					return false
				}
				if (!checkPhone(this.loginPhone)) {
					this.text("手机号格式不正确")
					return false
				}
				if (this.loginPassword == '') {
					this.text("密码不能为空")
					return false
				}

				let params = {
					username: this_.loginPhone,
					password: this_.loginPassword
				}
				this.$http.post("/api/user/login", params).then((res) => {
					uni.hideLoading()
					if (res.code == 0) {
						this_.updatelogin(true)
						this_.updateToken(res.data.token)
						this_.updateUserInfo(res.data.info)
						this_.goReLaunch('/pages/index/index')
					} else {
						this_.text(res.message)
					}
				})
			},
			touristsMode() {
				if (!this.checkoutYes) {
					this.text("请勾选'我同意 用户协助 ，隐私政策")
					return false
				}
				uni.showLoading({
					mask: false
				})
				let params = {
					visitor_id: this.deviceId
				}
				this.$http.post("/api/user/visitorLogin", params).then(res => {
					uni.hideLoading()
					if (res.code == 0) {
						this.updatelogin(true)
						this.updateToken(res.data.token)
						this.updateUserInfo(res.data.user_info)
						this.goReLaunch('/pages/index/index')
					} else {
						this.text(res.message)
					}
				})

			},
			// 注册
			sbmitForm_register() {
				if (!this.checkoutYes) {
					this.text("请勾选'我同意 用户协助 ，隐私政策")
					return false
				}
				if (!checkPhone(this.loginPhone)) {
					this.text("手机号格式不正确")
					return false
				}
				if (this.loginPassword == '') {
					this.text("密码不能为空")
					return false
				}
				if (this.loginRfpassword == '') {
					this.text("重复密码不能为空")
					return false
				}
				if (this.loginRfpassword != this.loginPassword) {
					this.text("两次密码不相同")
					return false
				}

				let params = {
					username: this.loginPhone,
					password: this.loginPassword,
					confirm_password: this.loginRfpassword,
				}
				uni.showLoading()
				this.$http.post("/api/user/register", params).then((res) => {
					uni.hideLoading()
					if (res.code == 0) {
						this.updatelogin(true)
						this.updateToken(res.data.token)
						this.updateUserInfo(res.data.user_info)
						this.text("注册成功")
						this.goReLaunch('/pages/index/index')
					} else {
						this.text(res.message)
					}
				})
			}

		}
	}
</script>
<style>
	page {
		background: #F6F7F9;
	}
</style>
<style lang="scss" scoped>
	.pageContent {
		.pageContentView {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			bottom: 113.46rpx;
			background: #ffffff;

			.header {
				height: 84.62rpx;
				margin-bottom: 155.77rpx;

				.back {
					width: 84.62rpx;
					height: 84.62rpx;
					display: flex;
					justify-content: center;
					align-items: center;

					.icon {
						width: 46.15rpx;
						height: 46.15rpx;
						display: block;
					}
				}

			}



			.pageView {
				padding: 0 69.23rpx;

				.fromTitle {
					height: 65.38rpx;
					font-size: 46.15rpx;
					font-weight: 600;
					color: #303030;
					line-height: 65.38rpx;
					margin-bottom: 84.62rpx;
				}


				.from {
					width: 100%;
					margin: 0 auto 27rpx;

					.item {
						margin-bottom: 46.15rpx;

						.title {
							margin-bottom: 23.08rpx;
							height: 38.46rpx;
							font-size: 26.92rpx;
							font-weight: 600;
							color: #787A79;
							line-height: 38.46rpx;
						}

						.inputView {
							height: 84.62rpx;
							background-color: #F6F7F9;
							overflow: hidden;
							border-radius: 42.31rpx;

							.input {
								padding: 0 38.46rpx;
								height: 84.62rpx;
								line-height: 84.62rpx;
								color: #000000;
								font-weight: 500;
								font-size: 26.92rpx;
								background: rgba(0, 0, 0, 0);
							}

							.pla {
								font-size: 26.92rpx;
								color: #BDBEBA;

							}

						}
					}



				}

				.loginBtn {
					width: 611.54rpx;
					height: 84.62rpx;
					line-height: 84.62rpx;
					text-align: center;
					font-size: 30.77rpx;
					font-weight: 500;
					background: #226CFF;
					color: #ffffff;
					border-radius: 42.31rpx;
					margin: 0 auto 23.08rpx;
					text-align: center;
				}

				.text {
					text-align: center;
					height: 38.46rpx;
					font-size: 26.92rpx;
					font-weight: 400;
					color: #AEAFB0;
					line-height: 38.46rpx;
					margin-bottom: 23.08rpx;
				}


			}



		}

		.foo {
			position: fixed;
			height: 113.46rpx;
			left: 0;
			right: 0;
			bottom: 0;
			display: flex;
			justify-content: center;
			align-items: center;

			.hine {
				height: 28rpx;

				.check_no {
					float: left;
					width: 28rpx;
					height: 28rpx;
					display: block;
				}

				.message {
					float: left;
					margin-left: 17rpx;
					height: 28rpx;
					line-height: 28rpx;
					font-size: 24rpx;
					color: #ABABAB;

					.href {
						margin: 0 9.62rpx;
						display: inline;
						height: 28rpx;
						font-size: 22rpx;
						font-weight: 400;
						line-height: 28rpx;
						text-decoration: underline;
					}
				}


			}

		}


	}
</style>